<template>
  <div class="frontend-test-panel">
    <div class="test-header">
      <h1>🎯 前端功能测试面板</h1>
      <p>无需后端即可测试所有前端功能和样式</p>
      <div class="nav-links">
        <router-link to="/" class="nav-link">🏠 首页</router-link>
        <router-link to="/contract-audit" class="nav-link">🔒 合约审计</router-link>
        <router-link to="/regulation" class="nav-link">📊 监管面板</router-link>
        <a href="http://localhost:5181" target="_blank" class="nav-link external">🌐 新标签页打开</a>
      </div>
    </div>

    <div class="test-controls">
      <div class="control-group">
        <h3>📋 选择测试场景</h3>
        <div class="button-grid">
          <button class="btn primary" @click="showEmptyState">空状态</button>
          <button class="btn primary" @click="showLoadingState">加载状态</button>
          <button class="btn primary" @click="showSuccessState">成功状态</button>
          <button class="btn primary" @click="showErrorState">错误状态</button>
          <button class="btn primary" @click="showVulnerableState">漏洞状态</button>
          <button class="btn secondary" @click="showRegulationPanel">RegulationPanel</button>
        </div>
      </div>
    </div>

    <div class="test-display">
      <!-- ContractAuditPanel 测试 -->
      <div v-if="currentTest === 'contract'" class="panel-container">
        <h2>🔒 ContractAuditPanel 测试</h2>
        <ContractAuditPanel :test-mode="true" :test-data="currentData" />
      </div>

      <!-- RegulationPanel 测试 -->
      <div v-if="currentTest === 'regulation'" class="panel-container">
        <h2>📊 RegulationPanel 测试</h2>
        <RegulationPanel :test-mode="true" :test-data="currentData" />
      </div>

      <!-- 美化功能测试 -->
      <div v-if="currentTest === 'beautify'" class="panel-container">
        <h2>🎨 文本美化功能测试</h2>
        <div class="beautify-test">
          <div class="test-input">
            <h4>原始输入：</h4>
            <pre>{{ testRawInput }}</pre>
          </div>
          <div class="test-output">
            <h4>美化输出：</h4>
            <div class="beautified-content" v-html="beautifiedOutput"></div>
          </div>
        </div>
      </div>

      <!-- 样式测试 -->
      <div v-if="currentTest === 'styles'" class="panel-container">
        <h2>🎨 样式测试</h2>
        <div class="style-showcase">
          <div class="style-item">
            <h4>按钮样式</h4>
            <button class="btn primary">Primary Button</button>
            <button class="btn secondary">Secondary Button</button>
            <button class="btn ghost">Ghost Button</button>
            <button class="btn primary large">Large Button</button>
          </div>

          <div class="style-item">
            <h4>标题样式</h4>
            <h3 class="section-header">Section Header (16px)</h3>
            <h5>Key Info Title (22px)</h5>
          </div>

          <div class="style-item">
            <h4>信息卡片样式</h4>
            <div class="key-info-card">
              <h5>审计关键信息</h5>
              <div class="info-item">
                <strong>审计状态:</strong> 完成
              </div>
              <div class="info-item">
                <strong>摘要:</strong> 安全审计已完成
              </div>
            </div>
          </div>

          <div class="style-item">
            <h4>统计卡片样式</h4>
            <div class="stats-grid">
              <div class="stat-card high">
                <div class="stat-number">2</div>
                <div class="stat-label">🔴 高危</div>
              </div>
              <div class="stat-card medium">
                <div class="stat-number">1</div>
                <div class="stat-label">🟠 中危</div>
              </div>
              <div class="stat-card low">
                <div class="stat-number">0</div>
                <div class="stat-label">🟡 低危</div>
              </div>
              <div class="stat-card info">
                <div class="stat-number">3</div>
                <div class="stat-label">🔵 信息</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="test-info">
      <div class="info-card">
        <h3>📊 测试信息</h3>
        <p><strong>当前测试:</strong> {{ currentTest || '未选择' }}</p>
        <p><strong>前端版本:</strong> Vue 3 + TypeScript</p>
        <p><strong>样式框架:</strong> 自定义CSS变量</p>
        <p><strong>测试模式:</strong> 启用 (不连接后端)</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import ContractAuditPanel from './ContractAuditPanel.vue';
import RegulationPanel from './RegulationPanel.vue';

// 测试状态
const currentTest = ref('');
const currentData = ref<any>(null);

// 美化功能测试数据
const testRawInput = ref(`##漏洞识别

重入 漏洞
位置： withdraw function in the Test 合约
描述：withdraw function uses call 转移Ether 对于调用方，这是一个常见的目标reentrancy 攻击。 ##影响评估 如果withdraw function is 在循环中调用或递归调用，可能会导致reentrancy 攻击，在外部调用返回之前，合约的状态被多次修改。 ##安全建议
重入 警卫：
使用areentrancy 防止再次呼叫withdraw 功能。
示例：
     bool private reentrancyLock = false;

     modifier nonReentrant() {
         require(!reentrancyLock, "Reentrant call detected");
         reentrancyLock = true;
         _;
         reentrancyLock = false;
     }

     function withdraw() external nonReentrant {
         msg.sender.call{value: 1 ether}("");
     }`);

const beautifiedOutput = computed(() => {
  // 简单的美化处理
  let output = testRawInput.value;

  // 转换标题
  output = output.replace(/##([^：:\s]+)[:：]?\s*/g, '\n## $1\n\n');

  // 转换字段
  output = output.replace(/位置：/g, '**位置：**\n');
  output = output.replace(/描述：/g, '**描述：**\n');
  output = output.replace(/示例：/g, '**示例：**\n');

  // 转换代码块
  output = output.replace(/(bool\s+private[\s\S]*?function\s+withdraw[\s\S]*?\}\s*\})/g,
    '```solidity\n$1\n```\n');

  return output.replace(/\n/g, '<br>');
});

// 测试场景数据生成器
const generateMockData = (type: string) => {
  const baseData = {
    success: true,
    timestamp: new Date().toISOString()
  };

  switch (type) {
    case 'empty':
      return null;

    case 'loading':
      return { loading: true };

    case 'success':
      return {
        ...baseData,
        data: {
          findings: [],
          summary: '合约安全审计完成，未发现明显安全问题。',
          status: '安全',
          analysis: '经过全面的安全分析，该智能合约未发现高危安全漏洞。建议继续遵循最佳实践进行代码维护。',
          report_markdown: '# 审计报告\n\n## 结论\n合约安全，无明显漏洞。'
        }
      };

    case 'vulnerable':
      return {
        ...baseData,
        data: {
          findings: [
            {
              title: '重入攻击漏洞',
              severity: 'High',
              description: 'withdraw函数使用call进行以太币转账，容易受到重入攻击',
              recommendation: '使用Checks-Effects-Interactions模式，或使用transfer/send代替call',
              confidence: 0.85,
              swcId: '107',
              evidence: {
                lines: [15, 18],
                snippets: ['msg.sender.call{value: amount}("");']
              }
            }
          ],
          summary: '发现1个高危漏洞，建议立即修复。',
          status: '高风险',
          analysis: testRawInput.value,
          report_markdown: '# 审计报告\n\n## 发现的漏洞\n\n### 重入攻击漏洞\n- **严重程度**: 高危\n- **描述**: withdraw函数存在重入攻击风险\n- **建议**: 使用Checks-Effects-Interactions模式'
        }
      };

    case 'error':
      return {
        success: false,
        error: '审计过程中发生错误，请检查合约代码格式'
      };

    default:
      return null;
  }
};

// 测试场景切换函数
const showEmptyState = () => {
  currentTest.value = 'contract';
  currentData.value = generateMockData('empty');
};

const showLoadingState = () => {
  currentTest.value = 'contract';
  currentData.value = generateMockData('loading');
};

const showSuccessState = () => {
  currentTest.value = 'contract';
  currentData.value = generateMockData('success');
};

const showErrorState = () => {
  currentTest.value = 'contract';
  currentData.value = generateMockData('error');
};

const showVulnerableState = () => {
  currentTest.value = 'contract';
  currentData.value = generateMockData('vulnerable');
};

const showRegulationPanel = () => {
  currentTest.value = 'regulation';
  currentData.value = generateMockData('vulnerable');
};

// 页面加载时显示默认测试
onMounted(() => {
  showSuccessState();
});
</script>

<style scoped>
.frontend-test-panel {
  min-height: 100vh;
  background: var(--background);
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.test-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, var(--muted) 0%, var(--card) 100%);
  border-radius: 12px;
  border: 2px solid var(--border);
}

.test-header h1 {
  margin: 0 0 10px 0;
  font-size: 28px;
  color: var(--foreground);
}

.test-header p {
  margin: 0 0 15px 0;
  color: var(--muted-foreground);
  font-size: 16px;
}

.nav-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-link {
  padding: 6px 12px;
  background: var(--primary);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}

.nav-link:hover {
  background: var(--primary);
  opacity: 0.9;
  transform: translateY(-1px);
}

.nav-link.external {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.test-controls {
  margin-bottom: 30px;
}

.control-group {
  background: var(--card);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.control-group h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: var(--foreground);
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.test-display {
  margin-bottom: 30px;
}

.panel-container {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.panel-container h2 {
  margin: 0 0 20px 0;
  font-size: 20px;
  color: var(--foreground);
  border-bottom: 2px solid var(--primary);
  padding-bottom: 10px;
}

.beautify-test {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.test-input, .test-output {
  background: var(--muted);
  padding: 15px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.test-input h4, .test-output h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: var(--foreground);
}

.test-input pre {
  background: var(--background);
  padding: 10px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--foreground);
  overflow-x: auto;
  margin: 0;
  white-space: pre-wrap;
}

.beautified-content {
  background: var(--background);
  padding: 15px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--foreground);
  line-height: 1.6;
  white-space: pre-wrap;
}

.style-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.style-item {
  background: var(--muted);
  padding: 15px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.style-item h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: var(--foreground);
}

.style-item .btn {
  margin-right: 8px;
  margin-bottom: 8px;
}

.test-info {
  margin-top: 30px;
}

.info-card {
  background: var(--card);
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.info-card h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: var(--foreground);
}

.info-card p {
  margin: 0 0 8px 0;
  color: var(--muted-foreground);
}

/* 导入原有样式 */
.key-info-card {
  margin: 40px auto 0;
  padding: 32px;
  max-width: 600px;
  width: 100%;
  background: linear-gradient(135deg, var(--muted) 0%, var(--card) 100%);
  border: 2px solid var(--border);
  border-radius: 12px;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  position: relative;
}

.key-info-card h5 {
  margin: 0 0 24px 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--foreground);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}

.info-item {
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--foreground);
  padding: 12px 16px;
  background: var(--background);
  border-radius: 8px;
  border-left: 4px solid var(--primary);
  text-align: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.stat-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 6px;
  padding: 12px 8px;
  text-align: center;
}

.stat-card.high { border-color: hsl(0, 84%, 60%); }
.stat-card.medium { border-color: hsl(25, 95%, 53%); }
.stat-card.low { border-color: hsl(48, 96%, 53%); }
.stat-card.info { border-color: hsl(217, 91%, 60%); }

.stat-number {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 11px;
  color: var(--muted-foreground);
}

/* 按钮样式 */
.btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.btn:hover:not(:disabled) {
  background: var(--muted);
}

.btn.primary {
  background: hsl(221, 83%, 53%);
  color: white;
  border-color: hsl(221, 83%, 53%);
}

.btn.primary:hover:not(:disabled) {
  background: hsl(221, 83%, 45%);
}

.btn.secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
  font-size: 13px;
  padding: 6px 12px;
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  font-size: 13px;
  padding: 6px 12px;
}

.btn.large {
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .frontend-test-panel {
    padding: 10px;
  }

  .button-grid {
    grid-template-columns: 1fr;
  }

  .beautify-test {
    grid-template-columns: 1fr;
  }

  .style-showcase {
    grid-template-columns: 1fr;
  }
}
</style>
